@-webkit-keyframes 'left-in'{  
    0% {  
        visibility:visible;  
        left: -100%;  
    }  
    100% {  
        visibility:visible;  
        left: 0%;  
    }  
      
}  
@-webkit-keyframes 'right-out'{  
    0% {  
        visibility:visible;  
        left: 0%;  
    }  
    100% {  
        visibility:visible;  
        left: 100%;  
    }  
}  
@-webkit-keyframes 'left-out'{  
    0% {  
        visibility:visible;  
        left: 0%;  
    }  
    100% {  
        visibility:visible;  
        left: -100%;  
    }  
      
}  
@-webkit-keyframes 'right-in'{  
    0% {  
        visibility:visible;  
        left: 100%;  
    }  
    100% {  
        visibility:visible;  
        left: 0%;  
    }  
}  
.right-in{  
    visibility:visible;  
    -webkit-animation-name: 'right-in';  
    -webkit-animation-duration: 1s;  
}  
.left-out{  
    visibility:hidden;  
    -webkit-animation-name: 'left-out';  
    -webkit-animation-duration: 1s;  
}  
.left-in{  
    visibility:visible;  
    -webkit-animation-name: 'left-in';  
    -webkit-animation-duration: 1s;  
}  
.right-out{  
    visibility:hidden;  
    -webkit-animation-name: 'right-out';  
    -webkit-animation-duration: 1s;  
      
}  
.slide{  
    position: absolute;  
    top:0px;  
    left: 0px;  
    box-sizing: border-box;  
    width: 100%;  
    height: 100%;  
    background-color: white;  
}  
.slide-container{  
    position: relative;  
    width: 100%;  
    height: 500px;  
    margin: 0 auto;  
    padding: 1px;  
    overflow: hidden;  
}  
.slide-container:hover
{
    cursor: pointer;
}
.slide-container:hover #div_shufflingShow
{
    display:block
}
#div_shufflingShow
{
    display: none;
}
.slide-img{  
    width: 100%;  
    height: 100%;  
}  
.slide-dec{  
    width: 100%;  
    white-space: nowrap;  
    text-overflow: ellipsis;  
    overflow: hidden;  
    position: relative;  
    top:-20%;  
    text-align: center;  
    color: #FFF;  
}  
#slide-tabs{  
    position: absolute;  
    top: 90%;  
    width: 100%;  
    height: 3%;  
    margin: 0 auto;  
    text-align: center;  
}
.div_shufflingShadow
{
    height:100%;
    width:12%;
    position:absolute;
    
    background: linear-gradient(to right,rgb(54, 52, 52),rgb(202, 197, 197));
    filter: blur(5px);
    opacity: .5;
}
#i_left
{
    top:40%;
    position:absolute;
    left:5%;
    position:absolute;
    font-size:50px;
    color:white;
}
#i_right{
    top:40%;
    position:absolute;
    right:5%;
    position:absolute;
    font-size:50px;
    color:white;
} 
.slide-tab{  
    position: relative;  
    display: inline-block;  
    height: 15px;  
    width: 15px;  
    border-radius: 50%;  
    background-color: #e0e0e0;  
    cursor: pointer;  
    margin-right: 2%;  
    
}  
.slide-tab:hover{  
    background-color: #FFFFFF;  
}  
.slide-tab-acitve{  
    background-color: #FFFFFF;  
}  
@media only screen and (max-width: 500px) {  
    .slide-tab{  
        height: 10px;  
        width: 10px;  
    }  
    .slide-container{  
        height: 200px;  
    }  
    .slide-dec{  
        font-size: 11px;  
    }  
}  